<template>
  <el-form :model="pwdForm" :rules="pwdRules" ref="pwdForm" @keyup.enter.native="updateUserPwdHandle" label-width="85px">
    <el-form-item label="旧密码" prop="oPassWord">
      <el-input v-model="pwdForm.oPassWord" maxlength="20" show-password placeholder="请输入用户旧密码" class="pwd-input"></el-input>
    </el-form-item>
    <el-form-item label="新密码" prop="nPassWord">
      <el-input v-model="pwdForm.nPassWord" maxlength="20" show-password placeholder="请输入用户新密码" class="pwd-input"></el-input>
      <span v-show="containChar" class="fz13 check-color">
        √ 包含大小写字母
      </span>
      <span v-show="containNumber" class="fz13 check-color">
        √ 包含数字
      </span>
      <span v-show="containSpecialChar" class="fz13 check-color">
        √ 包含特殊字符
      </span>
    </el-form-item>
    <el-form-item label="确认密码" prop="cPassWord">
      <el-input v-model="pwdForm.cPassWord" maxlength="11" show-password placeholder="请输入确认密码" class="pwd-input"></el-input>
      <span v-show="pwdLevel !== -1" class="fz13 check-color">
        密码强度为: {{ pwdLevelName[pwdLevel] }}
      </span>
    </el-form-item>
    <el-form-item>
      <el-button :disabled="buttonLoad" type="primary" @click="updateUserPwdHandle">修改</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  import { encrypt } from "assets/js/encryptUtils";

  export default {
    name: "user-pwd-update",
    data() {
      // 用户新密码校验
      let checkNPassWord = (rule, value, callback) => {
        if (value === '') {
          // 验证失败
          return callback(new Error("新密码不能为空!"))
        }
        if (value.length < 6) {
          this.clearPwdType()
          // 验证失败
          return callback(new Error("新密码长度不能小于6!"))
        }
        if (this.pwdForm.oPassWord === value) {
          this.clearPwdType()
          // 验证失败
          return callback(new Error("新密码与旧密码一致，请重新输入!"))
        }
        // 通过验证
        callback()
      }
      // 用户确认密码校验
      let checkCPassWord = (rule, value, callback) => {
        // 用户新密码为空
        if (this.pwdForm.nPassWord === '') {
          this.pwdLevel = -1
          // 验证失败
          return callback(new Error("请输入用户新密码!"))
        }
        if (value === '') {
          this.pwdLevel = -1
          // 验证失败
          return callback(new Error("确认密码不能为空!"))
        }
        if (this.pwdForm.nPassWord !== value) {
          this.pwdLevel = -1
          // 验证失败
          return callback(new Error("新密码与确认密码不同，请确认!"))
        }
        // 通过验证
        callback()
      }
      return {
        // 密码表单对象
        pwdForm: {
          oPassWord: '',    // 旧密码
          nPassWord: '',    // 新密码
          cPassWord: '',    // 确认密码
        },
        // 按钮是否可被点击[false-可以被点击 true-不可被点击]
        buttonLoad: false,
        // 新密码是否包含大小写字符[false-不包含 true-包含]
        containChar: false,
        // 新密码是否包含数字[false-不包含 true-包含]
        containNumber: false,
        // 新密码是否包含键盘可输入特殊字符[false-不包含 true-包含]
        containSpecialChar: false,
        // 用户新密码的强度等级[-1-没有输入密码 0-一级 1-二级 2-三级]
        pwdLevel: -1,
        // 新密码的强度[分为大小写字母、数字、键盘可输入特殊字符，包含一种的密码强度为一级、两种为二级、  三种为三级]
        pwdLevelName: ['一级', '二级', '三级'],
        // 匹配大小写字母正则表达式
        charRegex: /[A-Za-z]+/,
        // 匹配数字正则表达式
        numberRegex: /[0-9]+/,
        // 匹配键盘可输入特殊字符正则表达式
        specialRegex: /[`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]·！￥…（）—《》？：“”【】、；‘’，。]/im,
        // 用户密码校验规则
        pwdRules: {
          oPassWord: [
            { required: true, message: '用户旧密码不能为空', trigger: 'blur' }
          ],
          nPassWord: [
            { required: true, validator: checkNPassWord, trigger: 'blur' },
          ],
          cPassWord: [
            { required: true, validator: checkCPassWord, trigger: 'blur' },
          ],
        }
      }
    },
    watch: {
      // 监听表单中的新密码值
      'pwdForm.nPassWord'(value) {
        // 正则判断是否含有大小写字母
        this.containChar = this.charRegex.test(value)
        // 正则判断是否含有数字
        this.containNumber = this.numberRegex.test(value)
        // 正则判断是否含有键盘可输入的特殊字符
        this.containSpecialChar = this.specialRegex.test(value)
      },
      // 监听表单中的确认密码值
      'pwdForm.cPassWord'(value) {
        this.pwdLevel = -1
        if (this.charRegex.test(value)) {
          this.pwdLevel++
        }
        if (this.numberRegex.test(value)) {
          this.pwdLevel++
        }
        if (this.specialRegex.test(value)) {
          this.pwdLevel++
        }
      },
    },
    methods: {
      // 更新密码事件
      updateUserPwdHandle() {
        this.$refs['pwdForm'].validate((valid) => {
          if (!valid) {
            return false
          }
          // 按钮不可被点击
          this.buttonLoad = true

          let obj = {
            // 旧密码
            oPassWord: encrypt(this.pwdForm.oPassWord),
            // 新密码
            nPassWord: encrypt(this.pwdForm.nPassWord),
          }
          this.$axios.$post('/sys/user/pwd/update', obj)
            .then(() => {
              this.notify('success', '密码修改成功', '成功修改用户个人密码')
            })
            .catch(() => {})
            .finally(() => {
              // 按钮恢复可点击
              this.buttonLoad = false
            })
        })
      },
      // 清除新密码包含的内容标记
      clearPwdType() {
        // 包含大小写字母标记清除
        this.containChar = false
        // 包含数字标记清除
        this.containNumber = false
        // 包含键盘可输入特殊字符标记清除
        this.containSpecialChar = false;
      },
      /**
       * 重置密码表单事件
       */
      resetFormHandle() {
        // 重置修改密码表单对象
        this.$refs.pwdForm.resetFields();
      }
    }

  }
</script>

<style scoped>
  .pwd-input {
    width: 30%;
  }
  .check-color {
    color: #5CB87A;
  }
</style>
